<template>
  <div class="body" v-loading="aloading">
    <p class="title_box">退款信息</p>


    <div class="box" v-for="(item,index) in 3" :key="index">
      <block v-if="index == 0">
        <div class="radio" @click="changeTab(index)">
          <p :class="tabIndex == index?'quan on':'quan'"><span></span></p>
          当事人付款按照原路退款
        </div>
      </block>

      <block v-if="index == 1">
        <div class="radio" @click="changeTab(index)">
          <p :class="tabIndex == index?'quan on':'quan'"><span></span></p>
          当事人预留银行卡
        </div>
        <div class="list">
          <div>
            <p>预留银行：</p>
            <p>{{ylMsg&&ylMsg.bank_name?ylMsg.bank_name:'--'}}</p>
          </div>
          <div>
            <p>预留银行卡卡号：</p>
            <p>{{ylMsg&&ylMsg.card_number?ylMsg.card_number:'--'}}</p>
          </div>
        </div>
      </block>

      <block v-if="index == 2">
        <div class="radio" @click="changeTab(index)">
          <div>
            <p :class="tabIndex == index?'quan on':'quan'"><span></span></p>
            退款对公账户
          </div>
          <el-button size="mini" type="primary" @click.stop="handleUpload"
            >添加账号</el-button
          >
        </div>
        <div class="list" v-if="dgMsg.public_bank && dgMsg.public_bank.card_name">
          <div>
            <p>收款单位：</p>
            <p>{{dgMsg.public_bank.card_name}}</p>
          </div>
          <div>
            <p>对公银行卡卡号：</p>
            <p>{{dgMsg.public_bank.card_number}}</p>
          </div>
        </div>
      </block>
    </div>
    <p class="title_box">备注</p>
    <el-input v-model="notes" type="textarea" placeholder="请输入备注"/>


    <!-- 添加账号 -->
    <el-dialog v-if="addVisible" v-model="addVisible" :show-close="false">
      <add-public @changeSubmit="getAdd" @closeDrawer="closeDrawer"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref,onMounted,defineExpose } from "vue";
import { defineProps, defineEmits } from "vue";

import { getTkBank } from "@/api/bond/refund";
import { getYlBank } from "@/api/bond/pay";

import AddPublic from "./AddPublic.vue";

const props = defineProps({
  bailId: {
    type: Number,
  },
  bailInfo: {
    type: Object,
  },
});

onMounted(() => {
  getTkBankInfo()

  getYlBankInfo()
});

let aloading = ref(true)

let notes = ref('')

let dgMsg = ref({
  public_bank:{}
})
const getTkBankInfo =()=>{
  let data = {
    bail_id:props.bailInfo.bail_id,
    process_id:props.bailInfo.id,
  }
  getTkBank(data).then(res=>{
    aloading.value = false
    if(res.code == 1){
      if(res.data.public_bank){
        dgMsg.value = res.data
        console.log(dgMsg.value)
      }
      notes.value = res.data.notes
      if(res.data.bank_type){
        if(res.data.bank_type == 'refund'){
          tabIndex.value = 0
        }else if(res.data.bank_type == 'personal'){
          tabIndex.value = 1
        }else{
          tabIndex.value = 2
        }
      }
    }
  })
}

let ylMsg = ref({})
const getYlBankInfo =()=>{
  let data = {
    bail_id:props.bailInfo.bail_id,
  }
  getYlBank(data).then(res=>{
    if(res.code == 1){
      ylMsg.value = res.data
    }
  })
}

let tabIndex = ref(0)
const changeTab = (index: number)=>{
  tabIndex.value = index
}

// 添加账号
let addVisible = ref(false)
const handleUpload = ()=>{
  addVisible.value = true
}

// 关闭弹窗
const closeDrawer=()=>{
  addVisible.value = false
}

// 获取选择的公共账号
const getAdd =(obj: any)=>{
  console.log(obj)
  if(obj.bank_username){
    console.log(dgMsg)
    tabIndex.value = 2
    dgMsg.value.public_bank.card_name = obj.bank_username
    dgMsg.value.public_bank.card_number = obj.bank_num
    dgMsg.value.public_bank.card_id = obj.id
  }
}

defineExpose({
  tabIndex,
  dgMsg,
  ylMsg,
  notes
})

</script>

<style lang="scss" scoped>
.body{
  margin:0 30px;
}
.title_box{
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom:30px;
}
.box{
  margin-bottom:30px;
}
.radio{
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  cursor: pointer;
  &>div{
    display: flex;
    align-items: center;
    margin-right:18px;
  }
  .quan{
    width: 16px;
    height: 16px;
    border: 1px solid #D8D8D8;
    border-radius: 50%;
    margin-right:8px;
    &.on{
      background: #1C55D1;
      border-color:#1C55D1;
      display: flex;
      align-items: center;
      justify-content: center;
      span{
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
      }
    }
  }
}
.list{
  border-radius: 8px;
  background: #F8F8F8;
  border: 1px solid #EAEAEA;
  padding:10px 18px;
  margin-top:17px;
  div{
    display: flex;
    line-height: 34px;
    p{
      font-size: 14px;
      color: #3D3D3D;
      &:first-child{
        width: 130px;
      }
    }
  }
}
</style>
